@extends('wap.layouts.master')
@section('title','选择场地')

@section('pagecss')
<!--Swiper Css-->
<link rel="stylesheet" href="/library/swiper/swiper-4.1.0.min.css">
@endsection

@section('content')

<div class="aw-main aw-booking-choice">
	<!--条件筛选-开始-->
	<vue-select :form="form" :list_store="list_store" :list_type="list_type" :list_time="list_time"></vue-select>
	<!--条件筛选-结束-->
	<!--日期选择-开始-->
	<vue-date :today.sync="form.today"></vue-date>
	<!--日期选择-结束-->
	<!--场地选择-开始-->
	<div class="aw-mt10 aw-assest-field-radio" v-for="(list,key) in list_field">
		<div class="aw-field-radio-title" v-for="(li,key_li) in list.list" v-if="key_li==1">@{{list.storefront_name}} @{{list.type_text}} @{{list.number}}号场地</div>
		<ul class="aw-bg-fff aw-field-radio-list">
			<li class="aw-field-radio-li" v-for="(li,key_li) in list.list" v-on:click="Click_Selected(key,key_li,li.status)">
				<a href="javascript:;" class="aw-assest-btn" :class="Class_Status(li.lock,li.order_id,li.status,key,key_li)">@{{li.start_time}}-@{{li.end_time}}</a>
			</li>
				<!--
				<a href="javascript:;" class="aw-assest-btn aw-btn-disable">09:00-11:00</a>
				<a href="javascript:;" class="aw-assest-btn hover">09:00-11:00</a>
				-->
		</ul>
	</div>
	<div class="aw-pb20" v-if="!info_selected.start_time"></div>
	<div class="aw-pb100" v-if="info_selected.start_time"></div>
	<!--场次选择-结束-->
	<!--已选场次-开始-->
	<div class="aw-mt30 aw-assest-field-selected aw-position-fixed-selected" v-if="info_selected.start_time">
		<div class="aw-field-selected-title">已选场次</div>
		<ul class="aw-bg-fff aw-field-selected-list">
			<li class="aw-field-selected-li">
				<div class="aw-field-selected-adds">@{{info_selected.storefront_name}}<span class="aw-color-666">&nbsp;&nbsp;@{{info_selected.type_text}} (@{{info_selected.number}}号)</span></div>
				<div class="aw-field-selected-time">@{{info_selected.date_info.year}}年@{{info_selected.date_info.month}}月@{{info_selected.date_info.day}}日 @{{info_selected.start_time}}-@{{info_selected.end_time}}</div>
				<div class="aw-color-2 aw-field-selected-money">￥@{{info_selected.price}}</div>
				<a href="javascript:;" class="aw-field-selected-del" v-on:click="Del_Selected()"><i class="aw-icon aw-icon-del"></i></a>
			</li>
		</ul>
	</div>
	<!--已选场次-结束-->
</div>
<div class="aw-bg-191E1C aw-foot-btn aw-foot-btn1">
	合计：<span class="aw-color-2">￥@{{info_selected.price}}</span>
	<button type="submit" v-on:click="Submit_Appoint()" class="aw-assest-btn aw-btn-bgcolor-lvse">立即预约</button>
</div>
@section('pagejs')
@parent
<!--Swiper JS-->
<script type="text/javascript" src="/library/swiper/swiper-4.1.0.min.js"></script>

<script type="text/javascript" src="/wap/js/vue-select.js"></script>
<script type="text/javascript" src="/wap/js/vue-date.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
var Get_form={
	store_id:0,type:0,time:0,day:DateToday(),today:1,page_num:100,
}
$.extend(Get_form,MJS_URLArry);
var Vue_Data={
	list_store:{},//获取门店列表
	list_type:{},//获取场地类型列表 1
	list_time:{},//获取比赛时段列表
	list_date:{},//获取日期列表
	list_field:{},//获取场地列表 1
	info_selected:{},//已选场次列表
	form:Get_form,//请求参数
};
//获取门店列表
var AD_list_store={
	api:'/api/storefront/list',
	form_data:{page_num:100},
	tips:false,
}
getData(AD_list_store,function(ajax_data){
	Vue_Data.list_store=ajax_data.list;
})
//获取场地类型列表
var AD_list_type={
	api:'/api/storefront/fields',
	form_data:{store_id:Get_form.store_id,page_num:100},
	tips:false,
}
function Get_Refresh_Type_List(){
	getData(AD_list_type,function(ajax_data){
		Vue_Data.list_type=ajax_data.list;
	})
}
Get_Refresh_Type_List()
//获取比赛时段列表
var AD_list_time={
	api:'/api/field/time-list',
	form_data:{},
	tips:false,
}
getData(AD_list_time,function(ajax_data){
	Vue_Data.list_time=ajax_data;
})
//获取场地列表
var AD_list_field={
	api:'/api/field/info-list',
	form_data:{store_id:Get_form.store_id,type:Get_form.type,day:Get_form.day},
	tips:false,
}
function Get_Refresh_Field_List(){
	getData(AD_list_field,function(ajax_data){
		Vue_Data.list_field=ajax_data;
		is_watch='';
	})
}
Get_Refresh_Field_List()
var is_watch;
var This_Time=DateToday_Time();
var This_day=DateToday();
var Time_H=This_Time.h;
var Time_Arry=new Array(9,11,13,15,17,19,21);
vm=new Vue({
	el:'#Vue-body',
	data:Vue_Data,
	components:{
		'vue-select':V_Assest_select,
		'vue-date':V_Assest_date,
	},methods:{
		Class_Status:function(lock,order_id,status,key,key_li){
			var day=this.form.day;
			this.list_field[key].list[key_li].vue_start_time=this.list_field[key].list[key_li].start_time.substring(2,0)
			if(day==This_day){
				if(Time_H > this.list_field[key].list[key_li].vue_start_time){
					this.list_field[key].list[key_li].lock=1;
					if(this.list_field[key].list[key_li].vue_start_time=='00'){
						this.list_field[key].list[key_li].lock=0;
					}
				}
				if(Time_H == this.list_field[key].list[key_li].vue_start_time){
					this.list_field[key].list[key_li].lock=1;
				}
			}
			//场地时间
			if(lock==1){
				//锁定
				return 'aw-btn-disable';
			}else if(order_id!=0){
				//已订场
				return 'aw-btn-disable';
			}else if(status==1){
				//打开状态
				return 'open';
			}else if(status==2){
				//禁用状态
				return 'aw-btn-disable'
			}else if(status==4){
				//选中状态
				return 'aw-btn-bgcolor-lvse hover'
			}
		},Click_Selected:function(key,key_li,status){
			//选择场次
			console.log(key,key_li,status)
			var This_list_field=this.list_field[key];
			var Push_data=This_list_field.list[key_li];
			var info_selected=this.info_selected;
			if(Push_data.lock==1){
				return;
			}
			if(Push_data.order_id!=0){
				return;
			}
			if(status==1){
				if(info_selected.start_time){
					this.list_field[info_selected.key].list[info_selected.key_li].status=1;
				}
				Push_data.day=this.form.day;
				Push_data.storefront_name=This_list_field.storefront_name;
				Push_data.number=This_list_field.number;
				Push_data.type_text=This_list_field.type_text;
				var date_dom=$('.aw-assest-time ul li').eq(this.form.today-1)
				Push_data.date_info={
					year:date_dom.attr('data-year'),
					month:date_dom.attr('data-month'),
					day:date_dom.attr('data-day'),
					week:date_dom.attr('data-week'),
				};
				Push_data.key=key;
				Push_data.key_li=key_li;
				This_list_field.list[key_li].status=4;
				this.info_selected=Push_data;
			}
			if(status==4){
				This_list_field.list[key_li].status=1;
				this.info_selected={};
			}
		},Del_Selected:function(){
			//删除已选场次
			console.log('删除已选场次')
			var info_selected=this.info_selected;
			console.log(info_selected)
			this.list_field[info_selected.key].list[info_selected.key_li].status=1;
			this.info_selected={};
		},Submit_Appoint:function(){
			//立即预约
			if(!this.info_selected.price){
				msgTips('请选择场次');
				return;
			}else{
				this.info_selected.order_type=3;
				Post_Browser_Cache('info_order',this.info_selected)
				location.href='/wap/pay/pay';
			}
		},Get_List_Data:function(val){
			//更新数据
			if(val==1){
				this.Form_Time_Val(this.form.time)
				return
			}
			$.extend(AD_list_field.form_data,this.form);
			Get_Refresh_Field_List()
			this.Form_Time_Val(this.form.time)
		},Form_Time_Val:function(){
			//时段改变
			var list_field=this.list_field;
        	var info_selected=this.info_selected;
        	var is_time=this.form.time;
        	var This_start_time=$('#time option').eq(is_time).attr('data-start_time')
        	if(is_time==0){
        		//时间段不限
        		for(var i=0;i<list_field.length;i++){
	        		var list_field_list=list_field[i].list;
	        		for(var ii=0;ii<list_field_list.length;ii++){
	        			var field_list_start_time=list_field_list[ii].start_time;
	        			if(info_selected.start_time==field_list_start_time){
	        				if(info_selected.key==i){
	        					this.list_field[i].list[ii].status=4;
	        				}
	        			}else{
	        				this.list_field[i].list[ii].status=1;
	        			}
	        		}
	        	}
        	}
        	if(is_time>0){
        		this.info_selected={};
	        	for(var i=0;i<list_field.length;i++){
	        		console.log(list_field[i])
	        		var list_field_list=list_field[i].list;
	        		for(var ii=0;ii<list_field_list.length;ii++){
	        			var for_start_time=list_field_list[ii].start_time;
	        			//console.log('对比：'+This_start_time+'------'+for_start_time)
	        			var field_li=list_field_list[ii];
	        			if(This_start_time!=for_start_time){
	        				//如果不是选中的时间段就禁用
	        				this.list_field[i].list[ii].status=2;
	        			}else{
	        				//如果是选中的时间段就开启
	        				if(!info_selected.start_time){
	        					this.list_field[i].list[ii].status=1;
	        				}
	        			}
	        		}
	        	}
        	}
		}
	}
})
setTimeout(function(){
	vm.Form_Time_Val(Get_form.time);
},800)
console.log(vm)
Swiper_Date()
</script>
@endsection

@endsection

